<template>
    <div class="goods_image">
        <div class="big_image" ref="target">
            <!-- 左侧大图 -->
            <img :src="img_list[change_img] || img_list[0]" alt="loading">
            <!-- 蒙层滑块 -->
             <div class="layer" :style="{left:left + 'px',top:top + 'px'}" v-show="!isOutside"></div>
        </div>
        <ul class="small_image">
            <li v-for="(item, index) in img_list" :key="index" @mouseenter="enterHandler(index)"
                @mouseleave="isMouseHover = null"
            >
                <img :class="{ hovered: isMouseHover === index }" :src="item" /> 
            </li>
        </ul>
        <!-- 放大效果 -->
        <div class="large" v-show="!isOutside" :style="{backgroundPositionX:-left * 2 + 'px',
            backgroundPositionY:-top * 2+ 'px',
            backgroundImage:`url(${img_list[change_img]})`}"
            @mouseenter="enterHandler(index)">
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useMouseInElement } from '@vueuse/core'

//获取鼠标位置
const target = ref(null)
const left = ref(0)
const top = ref(0)
const { elementX, elementY, isOutside } = useMouseInElement(target)
//监听elementX, elementY,控制滑块跟随鼠标移动,重新设定left,top
watch([elementX, elementY,isOutside],()=>{
    if(isOutside.value) return
    //横向
    if(elementX.value > 100 && elementX.value < 300){
        left.value = elementX.value - 100
    }
    //纵向
    if(elementY.value > 100 && elementY.value < 300){
        top.value = elementY.value - 100
    }
    //处理边界
    if(elementX.value > 300){left.value = 200}
    if(elementX.value < 100){left.value = 0}
    if(elementY.value > 300){top.value = 200}
    if(elementY.value < 100){top.value = 0}
})

const change_img = ref()
const isMouseHover = ref(null)
//props适配图片列表
defineProps({
    img_list:{
        type:Array,
        default:()=>[]
    }
})

// 鼠标进入切换对应的大图,并显示激活状态
function enterHandler (index){
    isMouseHover.value = index
    change_img.value = index
}

</script>

<style lang="scss" scoped>
.goods_image{
    display: flex;
    padding: 30px;
    .big_image{
        width: 400px;
        height: 400px;
        cursor: pointer;
        position: relative;
        li{
            margin: 10px;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .layer{
            position: absolute;
            width: 200px;
            height: 200px;
            background: black;
            opacity: 0.15;
        }
    }
    .small_image{
        width: 70px;
        height: 70px;
        margin: 0 10px;
        li {
            margin-bottom: 12px; // 添加间距
        }
        img{
            cursor: pointer;
            width: 100%;
            height: 100%;
        }
        img.hovered{
            border: 1px solid #40e0d0;
        }
    }
    .large{
        width: 400px;
        height: 400px;
        position: absolute;
        z-index: 300;
        margin-left: 410px;
        background-size: 800px 800px;
        background-repeat: no-repeat;
        background-color: #f8f8f8;
    }
}
</style>